<template>
	<view class="page-container">
		<!-- 自定义导航栏 -->
		<u-navbar :fixed="true" placeholder bgColor="transparent" :autoBack="false">
			<template #left></template>
			<template #center>
				<view class="" style="color: #FFFFFF;">
					寺院法师
				</view>
			</template>
		</u-navbar>

		<!-- 背景图容器 -->
		<view class="background-image-container">
			<image class="background-image" src="https://client-temple.shengxuankj.com/images/home_bg.png"
				mode="widthFix" lazy-load></image>
		</view>

		<view class="header-text">
			<view class="title">寺院法师预约</view>
			<view class="subtitle">祈福、求安、点击这里开启您的心身安乐、得大自在、般若之旅。</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 白色内容卡片 -->
			<view class="content-card">
				<!-- 公告 -->
				<view class="notice-bar">
					<u-icon name="bell-fill" color="#A85151" size="20" />
					<text class="notice-title">公告</text>
					<view class="notice-content">
						<u-notice-bar color="#000" bgColor="transparent" :text="noticeValue" :icon="false"></u-notice-bar>
					</view>
				</view>

				<!-- 功能入口 -->
				<view class="entry-section">
					<view class="entry-card left" style="position: relative;">
						<image class="background-image"
							src="https://client-temple.shengxuankj.com/images/booking_bg.png" mode="widthFix"
							lazy-load />
						<view
							style="position: absolute;top: 40rpx;left: 0;width: 100%;padding: 0 30rpx;box-sizing: border-box;">
							<view class="entry-title">预约入口</view>
							<view class="entry-desc">祈福、求安、点击这里开启您的心身安乐、得大自在、般若之旅。</view>
						</view>
						<view style="position: absolute;bottom: 40rpx;right: 40rpx;">
							<u-button size="small" shape="circle" custom-class="entry-btn" @click="goToBooking">去预约</u-button>
						</view>
					</view>
					<view class="entry-card right" style="position: relative;">
						<image class="background-image"
							src="https://client-temple.shengxuankj.com/images/history_bg.png" mode="widthFix" lazy-load>
						</image>
						<view
							style="position: absolute;top: 40rpx;left: 0;width: 100%;padding: 0 30rpx;box-sizing: border-box;">
							<view class="entry-title" style="color: #000;">预约记录</view>
							<view class="entry-desc" style="color: #000;">查看您的预约状态了解您的进展。</view>
						</view>
						<view style="position: absolute;bottom: 40rpx;right: 40rpx;">
							<u-button size="small" shape="circle" custom-class="entry-btntwo" @click="goToHistory" color="#904446">去查看</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		onMounted, ref
	} from 'vue'
	import {
		get_openid, notice
	} from '@/utils/api'
	
	const noticeValue = ref('接待时间12:30-15:30 咨询请加 V：f13314817677')

	onMounted( async () => {
		uni.login({
			success: (res) => {
				console.log(res)
				get_openid({
					code: res.code
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.setStorageSync('openid', res.data.openid)
					}
				}).catch(error => {
					console.log(error)
				})
			}
		})
		
		await getNotice()
	})
	
	const getNotice = () => {
		notice().then(res=>{
			console.log(res)
			if(res.code == 1){
				noticeValue.value = res.data.content
			}
		}).catch(error=>{
			console.log(error)
		})
	}

	const goToBooking = () => {
		uni.navigateTo({
			url: '/pages/booking/index'
		})
	}

	const goToHistory = () => {
		uni.navigateTo({
			url: '/pages/history/index?type=1'
		})
	}

	// 分享功能
	const onShareAppMessage = () => {
		const promise = new Promise(resolve => {
			setTimeout(() => {
				resolve({
					title: '寺院预约'
				})
			}, 2000)
		})
		return {
			title: '寺院预约',
			path: '/pages/index/index',
			promise
		}
	}

	const onShareTimeline = () => {
		return {
			title: '寺院预约',
			query: '',
			imageUrl: 'https://client-temple.shengxuankj.com/images/home_bg.png'
		}
	}
</script>

<style lang="scss">
	.page-container {
		position: relative;
		min-height: 100vh;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-flow: column;
	}

	.van-nav-bar,
	.van-nav-bar__left,
	.van-nav-bar__title {
		background-color: transparent !important;
		color: #fff !important;
	}

	.van-nav-bar__title {
		font-weight: bold;
	}

	.background-image-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 800rpx;
		z-index: -1;
		overflow: hidden;
	}

	.background-image {
		width: 100%;
		height: 100%;
	}

	.header-text {
		padding: 0 50rpx;
		margin-top: 100rpx;
		color: #fff;

		.title {
			font-size: 44rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.subtitle {
			font-size: 28rpx;
			opacity: 0.8;
		}
	}

	.main-content {
		position: absolute;
		top: 730rpx;
		left: 0;
		width: 100%;
	}

	.content-card {
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 40rpx 30rpx;
	}

	.notice-bar {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		padding: 20rpx;
		background-color: #fdf6f6;
		border-radius: 16rpx;
		.notice-title {
			margin-left: 10rpx;
			font-size: 28rpx;
			color: #A85151;
			font-weight: bold;
		}

		.notice-content {
			width: calc(100% - 80rpx - 3em);
			margin-left: 20rpx;
		}
	}

	.entry-section {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;

		.entry-card {
			width: 48%;
			// height: 300rpx;
			border-radius: 20rpx;
			overflow: hidden;
			display: flex;
			.background-image {
				width: 100%;
				height: 100%;
			}

			.entry-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
				margin-bottom: 10rpx;
			}

			.entry-desc {
				font-size: 24rpx;
				color: #fff;
				opacity: 0.8;
			}
		}

		.right {
			background-color: #f5f5f5;
		}
	}

	.entry-btn {
		background-color: #fff !important;
		color: #A85151 !important;
	}

	.entry-btntwo {
		background-color: #904446 !important;
		color: #fff !important;
	}
</style>